/* Required Stylesheets */
.wheel-button {
  position: relative;
}

.wheel {
  margin: 0;
  padding: 0;
  list-style: none;
  width: 200px; /* this will determine the diameter of the circle  */
  height: 200px; /* this will determine the diameter of the circle  */
  visibility: hidden;
  position: relative;
  display: none;
}

.wheel li {
  overflow: hidden;
  float:left;
}

.wheel li a {
  display: block;
}

html {

  height: 100%;

}

body {

  background: #f4eedf;

  padding: 0;

  text-align: center;

  font-family: 'open sans';

  position: relative;

  margin: 0;

  height: 100%;

}



.wrapper {

  height: auto !important;

  height: 100%;

  margin: 0 auto; 

  overflow: hidden;

}



a {

  text-decoration: none;

}





h1, h2 {

  width: 100%;

  float: left;

}

h1 {

  margin-top: 100px;

  color: #555;

  margin-bottom: 5px;

}

h2 {

  color: #999;

  font-weight: 100;

  margin-top: 0;

  margin-bottom: 10px;

}



.pointer {

  color: #34495e;

  font-family: 'Pacifico', cursive;

  font-size: 22px;

  margin-top: -15px;

}



.wheel-button, .wheel-button:visited {

  line-height: 35px;

  font-weight: bold;

  font-size: 36px;

  background: #df4727; 

  padding: 10px 11px;

  text-align: center;

  border-radius: 60px;

  width: 60px;

  height: 60px;

  color: white;

  display: block;

  margin: 70px auto 20px;

  border: 3px solid #92311e;

  box-shadow: 0 1px 2px rgba(0,0,0,0.25);

  -moz-box-shadow: 0 1px 2px rgba(0,0,0,0.25);

  -webkit-box-shadow: 0 1px 2px rgba(0,0,0,0.25);

}



.wheel-button:hover{ 

  color: white;

}



.wheel-button.ne {

  border-color: white;

  background: #1ABC9C;

  color: #34FFFF;

  position: absolute;

  bottom: 10px;

  left: 10px;

}



.wheel-button.nw {

  border-color: white;

  background-color: #E67E22;

  color: #FFFC44;

  position: absolute;

  bottom: 10px;

  right: 10px;

}



.wheel-button span, .wheel span{

  position: relative;

  -moz-transition: all 1s ease;

  -webkit-transition: all 1s ease;

  -o-transition: all 1s ease;

  transition: all 1s ease;

  display: block;

}



.wheel-button.active span{

  transform: rotate(135deg);

  -ms-transform: rotate(135deg); /* IE 9 */

  -webkit-transform: rotate(135deg); /* Safari and Chrome */

}



.wheel li a, .wheel li a:visited{

  background: rgba(0,0,0,0.65);

  border-radius: 50px;

  font-weight: bold;

  padding: 10px;

  text-align: center;

  font-size: 25px;

  line-height: 20px;

  width: 50px;

  height: 50px;

  border: 1px solid black;

  box-shadow: 0 1px 2px rgba(0,0,0,0.25), inset 0 1px 1px rgba(255,255,255,0.5);

  -moz-box-shadow: 0 1px 2px rgba(0,0,0,0.25), inset 0 1px 1px rgba(255,255,255,0.5);

  -webkit-box-shadow: 0 1px 2px rgba(0,0,0,0.25), inset 0 1px 1px rgba(255,255,255,0.5);

  color: white;

  -moz-transition: all 0.25s ease;

  -webkit-transition: all 0.25s ease;

  -o-transition: all 0.25s ease;

  transition: all 0.25s ease;

}



.wheel li a:hover{

  background: rgba(0,0,0,0.8);

}



.main {

  float: left;

  width: 100%;

  margin: 0 auto;

}



.reload, .btn{

  display: inline-block;

  border: 4px solid #FFF;

  border-radius: 5px;

  -moz-border-radius: 5px;

  -webkit-border-radius: 5px;

  background: rgba(255,255,255, 0.75);

  display: inline-block;

  line-height: 100%;

  padding: 0.7em;

  text-decoration: none;

  opacity: 0.7;

  color: #555;

  width: 100px;

  line-height: 140%;

  font-size: 17px;

  font-family: open sans;

  font-weight: bold;

}

.reload:hover, .btn:hover {

  background: white;

}

.btn {

  width: 200px;

}

.btns {

  width: 230px;

  margin: 50px auto;

}

.credit {

  text-align: center;

  color: #999;

  padding: 10px;

  margin: 0 0 40px 0;

  background: rgba(255,255,255,0.25);

  float: left;

  width: 100%;

}

.credit a {

  color: #555;

  text-decoration: none;

  font-weight: bold;

}